<template>
  <div class="container">
    <h3>Props: {{ msg }}</h3>
    <h3 :style="{color: state.isActive ? 'blue' : 'black'}">Step: {{ step }} - Count: {{ count }}</h3>
    <h3 :class="[state.isActive ? 'double-count-active' : '']">Double Count: {{ doubleCount }}</h3>
    <input 
      type="text"
      v-model.number="step"
      v-highlight
    />
    <div @click="parentClick">
      <button @click="increment">增加会冒泡</button>
      <button @click.stop="increment">增加阻止冒泡</button>
    </div>
    <button @click="toggle">显示与隐藏</button>
    <ul v-if="state.isActive">
      <li v-for="item in state.items" :key="item">{{ item }}</li>
    </ul>
    <slot name="footer" :msg="msg"></slot>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'

// 定义props
const props = defineProps({
  msg: String
})

// 定义emits
const emit = defineEmits(['count-change'])

// 定义自定义指令
const vHighlight = {
  mounted(el) {
    console.log('vHighlight mounted')
    el.style.border = '2px solid blue';
  }
}

// 响应式数据
const state = reactive({
  items: ['Vue', 'JSX', 'Composition'],
  isActive: true
})

const toggle = () => {
  state.isActive = !state.isActive
}

const count = ref(0)
const step = ref(1)

// 计算属性
const doubleCount = computed(() => count.value * 2)

// 事件处理函数
const increment = () => {
  console.log('---- increment ----:')
  count.value += step.value
  emit('count-change', count.value)
}

const parentClick = () => {
  console.log('---- parentClick ----:')
  alert('parent click')
}

// 监听 count 的变化
watch(() => count.value, (newVal, oldVal) => {
  console.log(`${props.msg} count changed from ${oldVal} to ${newVal}`)
})

// 生命周期钩子
onMounted(() => {
  console.log(`${props.msg} 组件已经挂载`)
})
</script>

<style scoped>
/* 可以在这里添加样式，或者保持外部CSS文件导入 */
.container{
    background-color: red;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.double-count-active{
    color: blue;
    font-style: italic;
}
</style>